<template>
  <div class="dividebox-container">
    <div class="dividebox-left" :style="{ width: computedLeftWidth }" ref="leftRef">
      <slot name="left"></slot>
    </div>
    <div class="dividebox" :style="{ height: computedDivideHeight }" ref="divideRef" v-resize="['.dividebox-left', '.dividebox-right']"></div>
    <div class="dividebox-right" :style="{ width: computedRightWidth }" ref="rightRef">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue';

// MkDragSplitPanel 组件是一个可拖拽分割面板组件，用于将页面区域划分为左右两部分，中间有可拖拽的分割线。
// 1. 传入 props：可以通过 leftWidth 和 rightWidth 两个 props 来指定左右面板的宽度，格式必须为 "xxxpx"。
//    示例：<MkDragSplitPanel leftWidth="400px" rightWidth="200px"></MkDragSplitPanel>
// 2. 使用插槽：通过 left 和 right 插槽来插入左右面板的内容。
//    示例：
//    <MkDragSplitPanel>
//      <template #left>
//        <!-- 左侧面板内容 -->
//      </template>
//      <template #right>
//        <!-- 右侧面板内容 -->
//      </template>
//    </MkDragSplitPanel>
// 注意事项：
// - 如果不传入 leftWidth 和 rightWidth，组件会使用默认的宽度设置。
// - 组件会自动计算未指定的面板宽度。
const props = defineProps({
  leftWidth: {
    type: String,
    default: undefined
  },
  rightWidth: {
    type: String,
    default: undefined
  },
});

const leftRef = ref<HTMLElement | null>(null);
const rightRef = ref<HTMLElement | null>(null);
const divideRef = ref<HTMLElement | null>(null);

// 计算左侧宽度（优先使用 leftWidth，若未设置则根据 rightWidth 计算，否则用默认值）
const computedLeftWidth = computed(() => {
  if (props.leftWidth) return props.leftWidth;
  if (props.rightWidth) return `calc(100% - ${props.rightWidth} - 6px)`; // 减去右侧 padding-left:6px
  return 'calc(100% - 306px)'; // 原默认值（300px右宽 + 6px间隔）
});

// 计算右侧宽度（优先使用 rightWidth，若未设置则根据 leftWidth 计算，否则用默认值）
const computedRightWidth = computed(() => {
  if (props.rightWidth) return props.rightWidth;
  if (props.leftWidth) return `calc(100% - ${props.leftWidth} - 6px)`; // 减去左侧 padding-right:6px
  return '300px'; // 原默认值
});

// 计算分割线的高度
const computedDivideHeight = computed(() => {
  // if (leftRef.value && rightRef.value) {
  //   const maxHeight = Math.max(leftRef.value.offsetHeight, rightRef.value.offsetHeight);
  //   return `${maxHeight}px`;
  // }
  return '100%';
});

// 挂载后和左右面板高度变化时更新分割线高度
const updateDivideHeight = () => {
  if (divideRef.value) {
    divideRef.value.style.height = computedDivideHeight.value;
  }
};

onMounted(() => {
  updateDivideHeight();
  // 监听窗口大小变化
  window.addEventListener('resize', updateDivideHeight);
});

watch([leftRef, rightRef], () => {
  updateDivideHeight();
}, { deep: true });

</script>

<style lang="scss" scoped>
.dividebox-container {
  display: flex;
  flex-direction: row;

  .dividebox-left {
    display: flex;
    flex-direction: column;
    padding-right: 6px; // 保留原间隔
  }

  .dividebox-right {
    display: flex;
    flex-direction: column;
    padding-left: 6px; // 保留原间隔
  }

  .dividebox {
    width: 5px !important;
    opacity: 0.5;
    position: relative;

    &::before {
      content: ' :: ';
      font-family: iconfont;
      font-size: 13px;
      color: rgb(0, 0, 0);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>